<template>
  <div class="view-box">
    <RPIframe :src='singleIframeUrl' v-if="isSingle && initFinish" :showFullBtn="false"></RPIframe>
    <Tabs v-model="tabKey" class="tabs-app" v-else>
      <TabPane v-for="item in urlCodeList" :key="item.vsiKey"  :label="item.vsiValue" :name="item.vsiKey" class="tab-pane">
        <RPIframe :showFullBtn="false" v-if="tabKey == item.vsiKey && initFinish" :src='item.vsiDescription'></RPIframe>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import RPIframe from '@/components/common/RPIframe.vue'
import coverApi from '@/api/cover.js'
export default {
  name: 'formManage',
  components: {
    RPIframe
  },
  props: {
    codeMap: {
      type: Array,
      default: () => []
    },
    isSingle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      singleIframeUrl: '',
      tabKey: '',
      urlCodeList: []
    }
  },
  created: function () {
    this.init()
  },
  methods: {
    init() {
      coverApi.getCodeList('IFRAME_OUT_URL').then((res) => {
        let rescords = res.data.records
        if (rescords.length > 0) {
          const list = []
          rescords.forEach(item => {
            if (this.codeMap.includes(item.vsiKey)) {
              list.push(item);
            }
          });
          this.tabKey = list[0].vsiKey
          this.urlCodeList = list
        }
        if (this.isSingle) {
          this.singleIframeUrl = this.urlCodeList[0].vsiDescription
        }
        this.initFinish = true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.view-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .tabs-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /deep/.ivu-tabs-content  {
      flex: 1;
    }
  }
}

</style>

